<template>
  <div class="categories">
    <van-tabs category-list>
      <van-tab v-for="(item, index) in categories">
        <template #title>
          <div class="category-item">
            <img class="icon" :src="item.pictureUrl" alt="" />
            <div class="title">{{ item.title }}</div>
          </div>
        </template>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
  import useHomeStore from '@/stores/modules/home'
  import { storeToRefs } from 'pinia'
  const homeStore = useHomeStore()
  const { categories } = storeToRefs(homeStore)
</script>

<style lang="less" scoped>
  // 重写Vant 样式
  :global( .categories .van-tabs--line .van-tabs__wrap) {
    height: 65px !important;
  }

  .categories {
    text-align: center;
    .category-item {
      .icon {
        width: 32px;
        height: 32px;
      }
      .title {
        font-size: 14px;
      }
    }
  }
</style>
